import { SetupContext, computed, Ref ,onMounted,nextTick} from 'vue';
import { ExtendPanelPropsType, ExtendPanelProps } from '../extend-panel.props'
import { UseStyleVariable } from './types';

export function useStyleVariable(
    props: ExtendPanelPropsType,
    context: SetupContext,
    coverWidth: Ref,
    contentWidth:Ref
): UseStyleVariable {
    const styleVariable = computed(() => {
        let scale = props?.itemScale || ExtendPanelProps.itemScale;
        const isCssUnit = (str:string):boolean =>{
            if(str.includes('%') || str.includes('px') || str.includes('vw') || str.includes('rem') || str.includes('em')){
                return true;
            }else{
                return false;
            }
        }
        let coverWidth_ = coverWidth.value
        if(typeof(coverWidth.value) === 'string' && isCssUnit(coverWidth.value)){
            coverWidth_ = coverWidth.value;
        }else{
            coverWidth_ = coverWidth.value+'px';
        }
        return `
            --extend-panel-len: ${props.data.length};
            --extend-panel-gap: ${props?.itemGap || ExtendPanelProps.itemGap};
            --extend-panel-item-scale: ${scale};
            --extend-panel-cover-width:${coverWidth_};
            --extend-panel-content-width:${contentWidth.value};
            --extend-panel-content-height:${props?.height || '160px'};
            height:${props?.height || '160px'};
        `
    })
    const itemStyleVariable = (index: number): Record<string, number> => {
        return {
            '--f-extend-panel-layout-item-index': index
        }
    }
    return {
        styleVariable,
        itemStyleVariable
    }
}